<template>
	<view class="work-container">
		<!-- <uni-dateformat :date="data.captureTimeB" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
		<uni-dateformat :date="data.captureTimeE" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat> -->
		<view class="jsjg-box" v-for="(item, index) in list" @click="gotoDetail(item, type)">
			<view class="jsjg-box-img" v-if="type == 1">
				<view>
					<imageView :src="item.targetFieldMapping.captureFaceUrl" alt="" />
					<view class="jsjg-box-img-percent" v-if='item.recogScore'>{{ (item.recogScore * 100).toFixed(2) }}%
					</view>
				</view>
				<view style="margin: 10rpx 0" @click.stop="searchAgain(item.targetFieldMapping.captureFaceUrl)">
					<uni-icons type="search" size="30"></uni-icons>
				</view>

			</view>
			<view class="jsjg-box-img" v-if="type == 2">
				<view>
					<imageView :src="item.facePath" alt="" />
					<view class="jsjg-box-img-percent" v-if='item.score'>{{ (item.score * 100).toFixed(2) }}%
					</view>
				</view>
				<view style="margin: 10rpx 0" @click.stop="searchAgain(item.facePath)">
					<uni-icons type="search" size="30"></uni-icons>
				</view>

			</view>
			<view class="jsjg-box-img" v-if="type == 3">
				<view>
					<imageView :src="item.targetFieldMapping.captureBodyUrl" alt="" />
					<view class="jsjg-box-img-percent" v-if='item.recogScore'>{{ (item.recogScore * 100).toFixed(2) }}%
					</view>
				</view>
				<view style="margin: 10rpx 0" @click.stop="searchAgain(item.targetFieldMapping.captureBodyUrl)">
					<uni-icons type="search" size="30"></uni-icons>
				</view>
			</view>
			<view class="jsjg-box-img" v-if="type == 4">
				<view>
					<imageView :src="item.targetFieldMapping.captureVehicleUrl" alt="" />
					<view class="jsjg-box-img-percent" v-if='item.recogScore'>{{ (item.recogScore * 100).toFixed(2) }}%
					</view>
				</view>
				<view style="margin: 10rpx 0" @click.stop="searchAgain(item.targetFieldMapping.captureVehicleUrl)">
					<uni-icons type="search" size="30"></uni-icons>
				</view>
			</view>
			<view class="jsjg-box-img" v-if="type == 5">
				<view>
					<imageView :src="item.captureNonVehicleUrl" alt="" />
					<view class="jsjg-box-img-percent" v-if='item.recogScore'>{{ (item.recogScore * 100).toFixed(2) }}%
					</view>
				</view>
				<view style="margin: 10rpx 10rpx" @click.stop="searchAgain(item.captureNonVehicleUrl)">
					<uni-icons type="search" size="30"></uni-icons>
				</view>
			</view>

			<!-- <imageView :src="item.facePath" alt="" v-if="type==2"/>
			<imageView :src="item.captureBodyUrl" alt="" v-if="type==3"/>
			<imageView :src="item.captureVehicleUrl" alt="" v-if="type==4"/>
			<imageView :src="item.captureNonVehicleUrl" alt="" v-if="type==5"/> -->
			<view class="jsjg-title" v-if="type == 2">
				<uni-icons type="staff-filled" size="35rpx"></uni-icons>
				<!-- {{item.facedbName}} facedbId -->
				<view>
					{{ item.facedbId | getFacedbName(facedbIdList) }}
				</view>
			</view>
			<view class="jsjg-title" v-if="type == 4">
				<img src="../../../static/images/car.png" alt="">
				<view>
					{{ item.targetFieldMapping.vehiclePlateNumber == "" || item.targetFieldMapping.vehiclePlateNumber ==
						null ? $t('search:unknown') : item.targetFieldMapping.vehiclePlateNumber }}
				</view>
			</view>
			<view class="jsjg-title" v-if="type == 2">
				<uni-icons type="person-filled" size="35rpx"></uni-icons>
				<view>
					{{ item.name }}
				</view>
			</view>
			<view class="jsjg-title" v-if="type == 2">
				<img src="../../../static/images/carId.png" alt="">
				<view>
					{{ item.cardId }}
				</view>
			</view>
			<view class="jsjg-title" v-if="type == 1 || type == 3 || type == 4 || type == 5">
				<uni-icons type="videocam-filled" size="35rpx"></uni-icons>
				<view>
					{{ item.targetFieldMapping.deviceName }}
				</view>
			</view>
			<view class="jsjg-title" v-if="type == 1 || type == 3 || type == 4 || type == 5">
				<img src="../../../static/images/time.png" alt="">
				<view v-if="type == 1 || type == 3 || type == 4">
					{{ formatDate(item.targetFieldMapping.captureTime) }}
				</view>
				<view v-else>
					{{ formatDate(item.createTime) }}
				</view>
			</view>
		</view>
		<view class="wanTitle" v-if="(list == [] || list == '' || list == null) && !show">
			<image src="../../../static/images/notimg.png"></image>
			<view class="">
				{{ $t('search:noData') }}
			</view>
		</view>
	</view>
</template>
<script>
import {
	searchFace,
	searchFace2,
	recogFace2,
	correlationSearch,
	structureRecognize,
	DBFace2
} from "@/api/rljc.js"
import {
	searchCapture,
	searchCapture2
} from "@/api/rtjs.js"
import {
	searchVehicle,
	searchnoVehicle
} from "@/api/cljs.js"

import imageView from '@/components/imageView/index.vue'

export default {
	components: {
		imageView
	},
	data() {
		return {
			show: false,
			list: [],
			data: "",
			imgUrl: "/fileApi/",
			type: "", //1.抓拍库检索。2注册库检索。3.人体检索。4.机动车。5.两，三轮车
			index: 1,
			fromType: '',
			facedbIdList: []
		}
	},
	onLoad(options) {
		const parseData = JSON.parse(options.data)
		console.log('parseData', options.type, parseData)
		// if (options.type === '1' || options.type === '2' || options.type === '3') {
		structureRecognize({
			'img': parseData.imgList[0],
			// 'outputType': options.type == '4' ? 'vehicle' : options.type == '5' || options.type == '6' ? 'nonvehicle' : 'face',
			'outputType': 'face,person,vehicle,nonvehicle',
			// 'isVideo': 0,
			'isGetAttr': 0,
			'isGetFeature': 0,
			'isGetImage': 1,
			// 'isGetPassengerAttr': 0,
			'isGetPassengersAttr': 1,
			'imgType': 3
		}).then(res => {
			if (res?.code === '00000000') {
				const list = res?.data[options.type == '1' || options.type == '2' ? 'face' : options.type == '3' ? 'person' : options.type == '4' ? 'vehicle' : 'nonvehicle'] || [],
					res_list = list?.map(({
						objPic
					}) => ({
						name: parseData.imgList[0],
						url: objPic
					}))
				if (res_list.length === 0) {
					uni.showToast({
						title: this.$t('search:featureNotExtracted'),
						icon: 'none',
						duration: 1500
					});
					return
				}
				this.data = options.type === '1' || options.type === '3' || options.type === '4' || options
					.type === '5' || options.type === '6' ? {
					captureTimeB: parseData.captureTimeB,
					captureTimeE: parseData.captureTimeE,
					imgs: [parseData.imgList[0]],
					origin_img: parseData.imgList[0],
					thresholdMax: 1,
					thresholdMin: parseInt(parseData.thresholdMin) / 100,
					treeQueryParam: parseData.devicesTree && parseData.devicesTree.length > 0 ? {
						select: {
							deviceIds: parseData.devicesTree
						}
					} : {},
					faceAgeLowerLimit: options.type === '1' ? 0 : void 0,
					faceAgeUpLimit: options.type === '1' ? 120 : void 0,
					imgType: 3,
					databaseType: "Capture",
					subDeviceTypeList: ["8000", "8002", "8003", "8004", "8005"],
					topN: 300,
					targetFields: options.type === '4' ? ["captureVehicleId", "captureFaceId", "captureBodyId", "captureVehicleUrl", "captureFaceUrl", "captureBodyUrl", "address", "vehiclePlateNumber", "deviceId", "deviceName", "captureTime", "feature", "lng", "lat", "vehicleType", "vehicleBrand", "vehicleModel"] : void 0
				} : options.type === '2' ? {
					currentPage: 1,
					pageSize: 999,
					img: parseData.imgList[0],
					imgType: 3,
					thresholdMax: 1,
					thresholdMin: parseInt(parseData.thresholdMin) / 100,
					facedbIds: [parseData.facedbIds],
					topN: Number(parseData.topN),
				} : JSON.parse(options.data)
				this.type = JSON.parse(options.type)
				this.scerch()
			}
		})
		this.faceDB()
		// } else {
		// 	this.data = JSON.parse(options.data)
		// 	if (this.data.thresholdMin != "" || this.data.thresholdMin != undefined) {
		// 		this.data.thresholdMin = parseInt(this.data.thresholdMin) / 100
		// 	}
		// 	this.type = JSON.parse(options.type)
		// 	this.fromType = options.fromType
		// 	this.scerch()
		// }
	},
	onShow() {

	},
	// onPullDownRefresh() {
	// 	this.list = []
	// 	this.data.currentPage = 1
	// 	setTimeout(() => {
	// 		this.scerch()
	// 	}, 1000)
	// 	setTimeout(function() {
	// 		uni.stopPullDownRefresh();
	// 	}, 1000);
	// },
	methods: {
		searchAgain(src) {
			var obj = {}
			obj.imgUrl = src
			if (this.type == 1) {
				obj.showType = 1
				this.$tab.redirectTo('/pages/search/rljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
			if (this.type == 2) {
				obj.showType = 1
				this.$tab.redirectTo('/pages/search/rljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
			if (this.type == 3) {
				obj.showType = 1
				this.$tab.redirectTo('/pages/search/rtjs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
			if (this.type == 4) {
				obj.showType = 4
				this.$tab.redirectTo('/pages/search/cljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
			if (this.type == 5) {
				obj.showType = 5
				this.$tab.redirectTo('/pages/search/cljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
			if (this.type == 6) {
				obj.showType = 6
				this.$tab.redirectTo('/pages/search/cljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
			}
		},
		//(1.抓拍库检索。2注册库检索。)人脸详情 3.人体检索。（4.机动车。5.两0，三轮车1）车辆详情
		async gotoDetail(item, type) {
			if (type == 1 || type == 2) {
				if (type == 1) {
					const res = await correlationSearch({
						"currentPage": 1,
						"pageSize": 10,
						"captureTimeB": new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
						"captureTimeE": new Date(new Date().setHours(23, 59, 59, 999)).getTime(),
						"sysCaptureFaceIds": item.captureFaceId,
						"targetFields": ["captureTime", "createTime", "deviceState",
							"faceAppendantGlasses", "faceGenderCode", "race", "captureFaceUrl",
							"deviceType", "captureFaceId", "faceQualityScore", "deviceName",
							"captureBodyId", "bodyQualityScore", "captureBodyUrl", "captureVehicleId",
							"vehicleQualityScore", "captureVehicleUrl", "captureNonVehicleId",
							"nonVehicleQualityScore", "captureNonVehicleUrl", "sysCaptureFaceId",
							"sysCaptureBodyId", "sysCaptureVehicleId", "sysCaptureNonVehicleId"
						]
					})
					console.log('item', item)
					if (res.code === '00000000' && res.data.length > 0) {
						const captureBodyId = res.data[0].captureBodyId
						this.$tab.navigateTo('/pages/search/details/index?captureFaceId=' +
							item.captureFaceId + '&captureBodyId=' + captureBodyId + '&captureTimeL=' + item.captureTime)
					} else {
						this.$tab.navigateTo('/pages/search/details/index?captureFaceId=' +
							item.captureFaceId + '&captureTimeL=' + item.captureTime)
					}
				}
				if (type == 2) {
					localStorage.setItem("zckPerson", JSON.stringify(item))
					this.$tab.navigateTo('/pages/search/details/zpk')
				}

			} else if (type == 4) {
				// var data = {
				// 	// assocType:0,
				// 	captureIds: [item.captureId],
				// 	captureTime: [item.captureTimeL],
				// 	// queryDataSource:1
				// }
				this.$tab.navigateTo(
					`/pages/search/CarDetails/index?sysCaptureVehicleIds=${item.captureVehicleId}`)
			} else if (type == 5) {
				// var data = {
				// 	// assocType:0,
				// 	captureIds: [item.captureId],
				// 	captureTime: [item.captureTimeL],
				// 	// queryDataSource:1
				// }
				// this.$tab.navigateTo(`/pages/search/CarSDetails/index?data=${JSON.stringify(data)}`)
				this.$tab.navigateTo(
					`/pages/search/CarSDetails/index?sysCaptureNonvehicleIds=${item.captureNonVehicleId}`)
			} else if (type == 6) {
				// var data = {
				// 	//assocType:5,
				// 	captureIds: [item.captureId],
				// 	captureTime: [item.captureTimeL],
				// 	//queryDataSource:1
				// }
				// this.$tab.navigateTo(`/pages/search/CarTDetails/index?data=${JSON.stringify(data)}`)
				this.$tab.navigateTo(
					`/pages/search/CarSDetails/index?sysCaptureNonvehicleIds=${item.captureNonVehicleId}`)
			} else if (type == 3) {
				// const res = await correlationSearch({
				// 	"currentPage": 1,
				// 	"pageSize": 10,
				// 	"captureTimeB": 1754236800000,
				// 	"captureTimeE": 1754323199999,
				// 	"sysCaptureBodyIds": item.captureBodyId,
				// 	"targetFields": ["captureTime", "createTime", "deviceState", "faceAppendantGlasses",
				// 		"faceGenderCode", "race", "captureFaceUrl", "deviceType", "captureFaceId",
				// 		"faceQualityScore", "deviceName", "captureBodyId", "bodyQualityScore",
				// 		"captureBodyUrl", "captureVehicleId", "vehicleQualityScore",
				// 		"captureVehicleUrl", "captureNonVehicleId", "nonVehicleQualityScore",
				// 		"captureNonVehicleUrl", "sysCaptureFaceId", "sysCaptureBodyId",
				// 		"sysCaptureVehicleId", "sysCaptureNonVehicleId"
				// 	]
				// })
				// const captureFaceId = res.data[0].captureFaceId
				this.$tab.navigateTo('/pages/search/bodyDetails/index?captureId=' +
					item.captureId + '&captureBodyId=' + item.captureBodyId + '&captureTimeL=' + item
						.captureTimeL)
			}
		},
		scerch() {
			console.log(new Date(this.data.captureTimeB))
			console.log(this.data.captureTimeE)
			this.show = true
			//显示加载框
			uni.showLoading({
				'title': this.$t('search:dataLoading')
			})
			if (this.type == 1) {
				// searchFace(this.data).then(res => {
				// 	if (res.data != null) {
				// 		this.list = res.data.datas
				// 	}
				// 	this.show = false
				// })
				searchFace2(this.data).then(res => {
					if (res.code === '00000000') {
						this.list = res.data
					}
					this.show = false
				})
			} else if (this.type == 2) {
				// recogFace(this.data).then(res => {
				// 	if (res.data != null) {
				// 		this.list = res.data.datas
				// 	}
				// 	this.show = false
				// })
				recogFace2(this.data).then(res => {
					if (res.data != null) {
						this.list = res.data
					}
					this.show = false
				})
			} else if (this.type == 3) {
				// searchCapture(this.data).then(res => {
				// 	if (res.data != null) {
				// 		this.list = res.data.datas
				// 	}
				// 	this.show = false
				// })
				searchCapture2(this.data).then(res => {
					if (res.data != null) {
						this.list = res.data
					}
					this.show = false
				})
			} else if (this.type == 4) {
				searchVehicle(this.data).then(res => {
					if (res.data != null) {
						this.list = res.data
					}
					this.show = false
				})
			} else if (this.type == 5 || this.type == 6) {
				searchnoVehicle({
					// nonVehicleQueryType: this.type == 5 ? 0 : 1,
					...this.data
				}).then(res => {
					if (res.data != null) {
						this.list = res.data.datas
					}
					this.show = false
				})
			}
		},
		faceDB() {
			DBFace2({
				isDelete: 1
			}).then(res => {
				this.facedbIdList = res.data.map(({
					id,
					name
				}) => ({
					value: id,
					text: name
				}))
			})
		},
		formatDate(num) {
			if (num == '' || num == null) {
				return this.$t('search:none')
			} else {
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		}
	},
	filters: {
		getFacedbName: function (id, list) {
			return list.find(i => i.value === id)?.text
		}
	}
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.work-container {
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.jsjg-box {
	width: 330rpx;
	height: auto;
	border: 1px solid #dedede;
	margin: 20rpx 22rpx;
}

.jsjg-box-img {
	display: block;
	width: 280rpx;
	height: 230rpx;
	margin: 10rpx auto;
	border-radius: 5px;
	position: relative;
	display: flex;
	justify-content: space-between;
}

.jsjg-box-img img {
	display: block;
	width: 180rpx;
	height: 230rpx;
	margin: 10rpx auto;
	border-radius: 5px;
}

.jsjg-box-img-percent {
	/* width: 60px;
		height: 30px;
		background-color: orange;
		color: #fff;
		font-size: 16px;
		position: absolute;
		bottom: 0;
		right: 0; */
	position: absolute;
	right: 100rpx;
	bottom: -10rpx;
	font-size: 4.266667vw;
	font-family: DIN OT;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	line-height: 5.333333vw;
	height: 0;
	width: 18.666667vw;
	color: #fff;
	border-bottom: 4.533333vw solid #e1512f;
	border-left: 2.666667vw solid transparent;
}

.jsjg-title {
	display: flex;
	justify-content: left;
	padding: 0 10rpx;
	margin-bottom: 10rpx;
}

.jsjg-title view {
	width: 100%;
	font-size: 26rpx;
	padding: 0 0 0 10rpx;
	line-height: 34rpx;
	/* line-height: 28rpx; */
	/* word-wrap: break-word; */
}

.jsjg-title img {
	width: 34rpx;
	height: 34rpx;
}

.wanTitle {
	width: 750rpx;
	font-size: 32rpx;
	line-height: 40px;
	text-align: center;
	color: #b0b0b0;
}

.wanTitle image {
	margin-top: 200rpx;
	width: 500rpx;
	/* height: 400rpx; */
}

.btnIng {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	/*text-align: center;*/
	/*background-color: ;*/
}
</style>